@charset "utf-8";
section{

    // 顶部的部分
    .top{
        width: 100%;
        height: 750px;
        .photo{
            width: 100%;
            img{
                width: 100%;
            }
        }
    }

    // 顶部的描述
    .top_detail{
        position: absolute;
        top:227px;
        left: 1122px;
        .english_detail{
            font-size: 16px;
            color: #7f7f7f;
            height: 16px;
            line-height: 16px;
        }
        .chinese_detail{
            font-size: 42px;
            color: #333333;
            margin-top: 20px;
            line-height: 42px;
            height: 42px;
            margin-bottom: 55px;
            font-weight: 500;
        }
        .dream{
            font-size: 16px;
            color: #333333;
            line-height: 16px;
            height: 16px;
            margin-bottom: 18px;
        }
    }


    /***************我们的业务*********************/
    .ourBusiness{
        width: 100%;
        background: #ffffff;
        height: 900px;
        position: relative;
        text-align: center;
        padding-top: 120px;
        box-sizing: border-box;
        >p{
            color: #7f7f7f;
            font-size: 18px;
            height: 18px;
            line-height: 18px;
            margin-bottom: 20px;
            font-family: "Arial";
        }
        >h1{
            font-size: 32px;
            color: #343c4c;
            font-weight: 500;
            height: 32px;
            line-height: 32px;
            margin-bottom: 85px;
        }
        .logo{
            display: inline-block;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background:linear-gradient(to top,#1f1e23,#4b4956);
            img{
                display: block;
                margin-top: 50%;
                margin-left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .businessTree{
            width: 1080px;
            height: 560px;
            margin: -10px auto 0;
            background: url("../images/bluejScience/business_03.png") no-repeat center top;
            >div{
                width: 180px;
                height: 95px;
                text-align: center;
                float: left;
                img{
                    display: block;
                    margin: 0 auto 30px;
                }
                >span{
                    color: #343c4c;
                    font-size: 17px;
                }
            }
            >div:nth-child(2n-1){
                margin-top: 160px;
            }
            >div:nth-child(2n){
                margin-top: 280px;
            }
        }
        .line{
            margin: 0 auto;
            width: 45%;
            height: 2px;
            background: #ebebeb;
        }
    }


    /****************我们的核心竞争力*********************/
    .ourCore{
        width: 100%;
        height: 500px;
        background: #fff;
        position: relative;
        text-align: center;
        padding-top: 115px;
        box-sizing: border-box;
        >p{
            color: #7f7f7f;
            font-size: 18px;
            height: 18px;
            line-height: 18px;
            margin-bottom: 20px;
            font-family: "Arial";
        }
        >h1{
            font-size: 32px;
            color: #343c4c;
            font-weight: 500;
            height: 32px;
            line-height: 32px;
            margin-bottom: 85px;
        }

        .coreleft{
            width: 960px;
            float: left;
            height: 650px;
            background: url("../images/bluejScience/bgcore_02.png") no-repeat center;
            .ide{
                margin-left: 148px;
                margin-top: 26px;
                width: 790px;
                height: 570px;
                background: #fff;
                box-shadow: 0 0 20px #D7D4D4;
                .ideHead{
                    width: 100%;
                    height: 67px;
                    .ideLogo{
                        width: 100%;
                        height: 67px;
                        display: table;
                        vertical-align: middle;
                        span{
                            display: table-cell;
                            vertical-align: middle;
                        }
                        .logoleft{
                            width: 147px;
                        }
                        .logoright{
                            text-align: right;
                        }
                        .title{
                            display: inline-block;
                            width: 94px;
                            height: 10px;
                            border-radius: 2px;
                            background: #efefef;
                            margin-right: 15px;
                        }
                    }
                    
                }

                .ideSection{
                    width: 100%;
                    height: 503px;
                    .sectionleft{
                        width: 173px;
                        height: 100%;
                        background: #36343d;
                        box-shadow: 0 0 20px #D7D4D4; 
                        padding-top: 60px;
                        box-sizing: border-box;
                        float: left;
                        .dotline{
                            width: 95px;
                            height: 105px;
                            margin-left: 33px;
                            margin-bottom: 300px;
                            font-size: 0;
                            .dot{
                                width: 10px;
                                height: 10px;
                                background: #737178;
                                display: inline-block;
                                margin-right: 15px;
                                margin-bottom: 25px;
                                border-radius: 2px;
                            }
                            .line{
                                display: inline-block;
                                width: 70px;
                                height: 10px;
                                background: #737178; 
                                margin-bottom: 25px;
                                border-radius: 2px;
                            }
                        }
                        .lines{
                            width: 60px;
                            height: 10px;
                            display: inline-block;
                            background:#737178;
                            border-radius: 2px;
                        }
                    }
                    .sectionright{
                        width: 617px;
                        height: 100%;
                        float: left;
                        padding-top: 35px;
                        padding-left: 62px;
                        box-sizing: border-box;
                        .righttop{
                            width: 100%;
                            height: 60px;
                            .titlelong{
                                width: 115px;
                                height: 10px;
                                background:#b2b2b2;
                                margin-bottom: 15px;
                                border-radius: 2px;
                            }
                            .titleshort{
                                width: 75px;
                                height: 10px;
                                background:#efefef;
                                margin-bottom: 25px;
                            }

                        }
                        .rightcontent{
                            .blueblock{
                                width: 330px;
                                height: 160px;
                                background: #cae9f8;
                                float: left;
                                margin-right: 40px;
                            }
                            .cylinder{
                                float: left;
                                >div{
                                    position: relative;
                                    float: left;
                                    width: 10px;
                                    height: 100px;
                                    border-radius: 5px;
                                    background: #efefef;
                                    margin-right: 20px;
                                    &::after{
                                        content: "";
                                        display: block;
                                        position: absolute;
                                        width: 10px;
                                        height: 40px;
                                        border-radius: 5px;
                                        bottom: 0;
                                        left: 0;
                                        background: #089788;
                                    }
                                    
                                }
                                >div:nth-child(2)::after{
                                    height: 60px;
                                }
                                >div:nth-child(3)::after{
                                    height: 20px;
                                }
                                
                            }
                            .level{
                                float: left;
                                width: 90px;
                                height: 10px;
                                background: #b2b2b2;
                                border-radius: 2px;
                                margin-top: 25px;
                                margin-right: 40px;
                            }
                            .short{
                                width: 40px;
                                margin-top: 10px;
                                background: #efefef;
                                border-radius: 2px;
                            }
                        }
                        .rightbottom{
                            width: 100%;
                            height: 200px;
                            >div{
                                position: relative;
                                float: left;
                                width: 125px;
                                height: 170px;
                                margin-right: 70px;
                                .radialProgressBar {
                                    border-radius: 50%;
                                    margin-top: 35px;
                                    width: 120px;
                                    height: 120px;
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex;
                                    background: #ddd;
                                    box-sizing: border-box;
                                    .overlay{
                                        border-radius: 50%;
                                        width: 100px;
                                        height: 100px;
                                        margin: auto;
                                        background: #fff;
                                        text-align: center;
                                        padding-top: 30%;
                                        box-sizing: border-box;
                                    }
                                }
                                .progress-50 {
                                    background-image: -webkit-linear-gradient(right, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
                                    background-image: linear-gradient(-90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
                                } 
                                .dotline{
                                    margin-top: 20px;
                                    font-size: 0;
                                    text-align: left;
                                    .dot{
                                        display: inline-block;
                                        width: 15px;
                                        height: 10px;
                                        border-radius: 2px;
                                        margin-right: 15px;
                                        background: #efefef;
                                    }
                                    .line{
                                        display: inline-block;
                                        width: 80px;
                                        height: 10px;
                                        border-radius: 2px;
                                        background: #efefef;                                        
                                    }
                                    .line:last-child{
                                        margin-left: 30px;
                                        margin-top: 10px;
                                        width: 40px;
                                    }
                                }
                            }
                            >div:last-child{
                                margin-right: 0;
                            }

                        }
                    }
                    

                }


            }
        }
        .coredetail{
            float: left;
            padding-top: 87px;
            padding-left: 170px;
            box-sizing: border-box;
            text-align: left;
            width: 600px;
            p{
                line-height: 32px;
                font-size: 16px;
                color: #343c4c;
            }
            .detailtop{
                color: #343c4c;
                font-size: 16px;
                line-height: 16px;
                height: 16px;
            }
            .largedetail{
                font-size: 32px;
                margin: 20px 0 25px;
            }
            .vue{
                width: 130px;
                height: 130px;
                border-radius: 10px;
                margin-top: 45px;
                border: 1px solid #dddddd;
                span{
                    display: block;
                    text-align: center;
                    vertical-align: middle;
                    margin-top: 20px; 
                }
                span:last-child{
                    margin-top: 10px;
                    color: #000000;
                    font-weight: 600;
                    font-size: 20px;
                }
            }
        }

        /********************游戏部分**************************/ 
        .game{
            float: left;
            position: relative;
            width: 100%;
            height: 745px;
            background: url("../images/bluejScience/game_bg.png") no-repeat right bottom;
            .bigzombie{
                position: absolute;
                top: 118px;
                left: 1191px;
            }
            .smallzombie{
                position: absolute;
                top: 255px;
                left: 1515px;
            }
            .bigflame{
                position: absolute;
                top: 270px;
                left: 1100px;
            }
            .smallflame{
                position: absolute;
                top: 352px;
                left: 1414px;
            }
            .gamedetail{
                margin-top: 187px;
                margin-left: 390px;
                text-align: left;
                p{
                    line-height: 32px;
                    font-size: 16px;
                    color: #343c4c;
                }
                .detailtop{
                    color: #343c4c;
                    font-size: 16px;
                    line-height: 16px;
                    height: 16px;
                }
                .largedetail{
                    font-size: 32px;
                    margin: 20px 0 25px;
                }
                .vue{
                    width: 130px;
                    height: 130px;
                    border-radius: 10px;
                    margin-top: 45px;
                    float: left;
                    margin-right: 15px;
                    border: 1px solid #dddddd;
                    span{
                        display: block;
                        text-align: center;
                        vertical-align: middle;
                        margin-top: 20px; 
                    }
                    span:last-child{
                        margin-top: 10px;
                        color: #000000;
                        font-weight: 600;
                        font-size: 20px;
                    }
                }
            }
        }

        /********************人物部分**************************/
        .person{
            float: left;
            position: relative;
            width: 100%;
            height: 745px;
            .swiper-container{
                width: 100%;
                height: 100%;
                .carousel{
                    width: 50%;
                    height: 760px;
                    float: left;
                    text-align: left;
                    background: url("../images/bluejScience/bg_person_02.png") no-repeat center bottom;
                    .imgsize{
                        width: 473px;
                        height: 623px;
                        margin-left: 116px;
                        margin-top: 137px;
                        box-sizing: border-box;
                    }
                }
                .text{
                    position: absolute;
                    left: 550px;
                    top: 320px;
                    width: 366px;
                    height: 275px;
                    text-align: justify;
                    color: #ffffff;
                    font-size: 24px;
                    .textcontent{
                        font-size: 14px;
                        margin-top: 40px;
                        line-height: 25px;
                    }
                }



                .carouselright{
                    width: 50%;
                    height: 745px;
                    float: left;
                    >div{
                        margin-left: 149px;
                        margin-top: 314px;
                        width: 600px;
                        text-align: left;
                        p{
                            line-height: 32px;
                            font-size: 16px;
                            color: #343c4c;
                        }
                        .detailtop{
                            color: #343c4c;
                            font-size: 16px;
                            line-height: 16px;
                            height: 16px;
                        }
                        .largedetail{
                            font-size: 32px;
                            margin: 20px 0 25px;
                        }
                        .vue{
                            width: 130px;
                            height: 130px;
                            border-radius: 10px;
                            margin-top: 45px;
                            float: left;
                            margin-right: 15px;
                            border: 1px solid #dddddd;
                            span{
                                display: block;
                                text-align: center;
                                vertical-align: middle;
                                margin-top: 20px; 
                            }
                            span:last-child{
                                margin-top: 10px;
                                color: #000000;
                                font-weight: 600;
                                font-size: 20px;
                            }
                        }
                    }
                }

            }

            
        }


        /****************我们的实力*******************/
        .ourstrength{
            width: 100%;
            height: 970px;
            float: left;
            box-sizing: border-box;
            .line{
                margin: 150px auto 0;
                width: 45%;
                height: 2px;
                background: #ebebeb;
                >p{
                    color: #7f7f7f;
                    font-size: 18px;
                    height: 18px;
                    line-height: 18px;
                    padding-top: 75px;
                    margin-bottom: 20px;
                    font-family: "Arial";
                }
                >h1{
                    font-size: 32px;
                    color: #343c4c;
                    font-weight: 500;
                    height: 32px;
                    line-height: 32px;
                    margin-bottom: 85px;
                }
            }
            .swiper-container{
                width: 1515px;
                height: 813px;
                margin: 0 auto;
                padding-top: 200px;
                padding-left: 50px;
                padding-right: 50px;
                box-sizing: border-box;
            }
        }


        /********************合作企业**********************/ 
        .cooperative{
            width: 100%;
            float: left;
            background: #f0f0f1;
            >div{
                width: 920px;
                margin: 100px auto 85px;
                >div{
                    width: 300px;
                    height: 250px;
                    float: left;
                    background: #ffffff;
                    position: relative;
                    margin-bottom: 10px;
                    margin-right: 10px;
                    transition: all .8s linear;
                    span{
                        display: block;
                        position: absolute;
                        left: 10%;  
                        top: 10%;
                    }
                    img{
                        display: block;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        box-sizing: border-box;
                        transform: translate(-50%,-50%);
                    }
                    &:hover{
                        transform: scale(1.1);
                        box-shadow: 0 0 40px #737178;
                        background: #343c4c;
                        z-index: 10;
                        span{
                            color: #ffffff;
                        }
                    }
                }
                >div:nth-child(3n){
                    margin-right: 0;
                }
            }
            
        }




    }

}